<template>
    <div class="mv container">
        <div class="item-box">
            <!-- 标签 -->
            <div class="tags">
                <ul class="tag">
                    <li
                        v-for="item of areaList"
                        :key="item.value"
                        :class="area == item.value ? 'active' : ''"
                        @click="chooseType('area', item.value)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
                <ul class="tag">
                    <li
                        v-for="item of classifys"
                        :key="item.value"
                        :class="classify == item.value ? 'active' : ''"
                        @click="chooseType('classify', item.value)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
                <ul class="tag">
                    <li
                        v-for="item of sortList"
                        :key="item.value"
                        :class="sort == item.value ? 'active' : ''"
                        @click="chooseType('sort', item.value)"
                    >
                        {{ item.label }}
                    </li>
                </ul>
            </div>
            <!-- mv列表 -->
            <div class="mvlist">
                <load-more @scroll-state="load">
                    <mv-list
                        :mvs="mvs"
                        type="mv"
                    ></mv-list>
                </load-more>
                <div v-if="loading">
                    <loading />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { createVideo } from '@/model/video'
import MvList from '@/components/common/mvList/Index'
import loadMore from '@/components/common/loadMore/Index'
import loading from '@/components/common/loading/Index'

export default {
    data() {
        return {
            // 语种
            area: '全部',
            areaList: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '内地',
                    label: '内地'
                },
                {
                    value: '港台',
                    label: '港台'
                },
                {
                    value: '欧美',
                    label: '欧美'
                },
                {
                    value: '日本',
                    label: '日本'
                },
                {
                    value: '韩国',
                    label: '韩国'
                }
            ],
            // 分类
            classify: '全部',
            classifys: [
                {
                    value: '全部',
                    label: '全部'
                },
                {
                    value: '官方版',
                    label: '官方版'
                },
                {
                    value: '原生',
                    label: '原生'
                },
                {
                    value: '现场版',
                    label: '现场版'
                },
                {
                    value: '网易出品',
                    label: '网易出品'
                }
            ],
            // 排序
            sort: '上升最快',
            sortList: [
                {
                    value: '上升最快',
                    label: '上升'
                },
                {
                    value: '最热',
                    label: '最热'
                },
                {
                    value: '最新',
                    label: '最新'
                }
            ],
            // 请求参数
            params: {
                // 返回数量
                limit: 12,
                // 偏移数量
                offset: 0,
                // 分类
                type: '全部',
                // 语种
                area: '全部',
                order: '上升最快'
            },
            mvs: [],
            loadStatus: false, //是否还有更多数据
            loading: false // 是否显示加载动画
        }
    },
    components: {
        MvList,
        loadMore,
        loading
    },
    created() {
        this.getMvAll()
    },
    methods: {
        // 选择歌手分类
        chooseType(type, val) {
            if (type == 'area') {
                this.area = val
                this.params.area = val
            } else if (type == 'classify') {
                this.classify = val
                this.params.type = val
            } else if (type == 'sort') {
                this.sort = val
                this.params.order = val
            }
            this.params.offset = 0
            this.loadStatus = true
            this.mvs = []
            this.getMvAll()
        },
        // 获取mv列表
        async getMvAll() {
            const { data: res } = await this.$api.getMvAll(this.params)
            // console.log(res)
            if (res.code !== 200) {
                return this.message.error('获取mv列表失败！');
            }
            this.mvs = this.mvs.concat(this._normalizeVideos(res.data))
            if (res.hasMore) {
                this.loading = true
                this.loadStatus = true
                this.params.offset += 12
            } else {
                this.loading = false
            }
        },
        // 处理视频
        _normalizeVideos(list) {
            let ret = []
            list.map(item => {
                if (item.id) {
                    ret.push(
                        createVideo({
                            id: item.id,
                            nickName: item.artistName,
                            name: item.name,
                            playCount: item.playCount,
                            duration: item.duration,
                            image: item.cover
                        })
                    )
                }
            })
            return ret
        },
        // 加载更多
        load() {
            if (this.loadStatus) {
                setTimeout(() => {
                    this.getMvAll()
                }, 500)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.mv {
    min-width: 1080px;

    .tags {
        margin: 0 0 30px 10px;
        .tag {
            margin-bottom: 20px;
            li {
                display: inline-block;
                cursor: pointer;
                width: 56px;
                text-align: center;
                line-height: 29px;
                border-radius: 16px;
                margin: 0 10px 10px 0;
                cursor: pointer;
                font-size: 12px;
                color: #161e27;
                &:hover {
                    color: #666;
                }
                &.active {
                    color: #fff;
                    background: #fa2800;
                }
            }
        }
    }
}
</style>